<template>
  <view>
    <base-container>
      <view>
        <base-card :thumbnail="imag[form.flag]" :title="form.nameValue">
          <!-- <template #head>
            {{ form.ctPersonName }}
          </template> -->
          <view style="margin-bottom: 20rpx;">
			<text class="label">调休时间</text>
			<text class="value">{{ form.beginTime.split(':')[0] + ' ' + form.beginTime.split(':')[1] }} ~ {{ form.endTime.split(':')[0] + ' ' + form.endTime.split(':')[1] }}</text>
          </view>
          <view style="margin-bottom: 20rpx;">
            <text class="label">调休原因</text>
            <text class="auto-wrap value"> {{ form.reason }}</text>
          </view>
		  <view style="margin-bottom: 20rpx;">
		    <text class="label">备注</text>
		    <text class="value"> {{ form.remark || "无" }}</text>
		  </view>
		  <view style="margin-bottom: 20rpx;">
		    <text class="label">添加时间</text>
		    <text class="value"> {{ form.createTime }}</text>
		  </view>
        </base-card>
        <!-- <base-card>
          <view>
            <text class="label">备注</text>
            <text class="value"> {{ form.remark || "无" }}</text>
          </view>
          <view>
            <text class="label">添加时间</text>
            <text class="value"> {{ form.createTime }}</text>
          </view>
        </base-card> -->
      </view>
    </base-container>
  </view>
</template>

<script>
import {LeaveApi as Api} from "@/comms/api/leaveApi";
import {Msg, toBack, toPath} from "@/utils/BaseUtils";

export default {
  data() {
    return {
      params: {},
      form: {},

      imag: {
        audit: '/static/my/jz.png',
        agree: '/static/my/ytg.png',
        reject: '/static/my/jz.png'
      },
      tabs: [
        {key: 'audit', name: '待审核',},
        {key: 'agree', name: '已通过'},
        {key: 'reject', name: '已拒绝'}
      ]
    };
  },
  onLoad(params) {
    this.params = params;
    uni.setNavigationBarTitle({title: "调休详情"});
  },
  mounted() {
    this.loadDate(this.params)
  },
  methods: {
    toPath,
    async loadDate({id}) {
      Msg.loading(async close => {
        if (id) {
          await Api.detail({id}).then(({data}) => this.form = {...data})

          this.form.nameValue = this.tabs.find(v => v.key == this.form.flag)?.name
        }
        close?.();
      })
    },
    remove({id}) {
      Msg.confirm("确定删除该手工记账信息?")
          .then(() => {
            Api.delete({id}).then(res => {
              Msg.success("删除成功")
              toBack?.()
            })
          })
    }
  }
}
</script>

<style lang="scss" scoped>
.auto-wrap {
  /* 允许在单词内部进行换行 */
  word-break: break-all;
  /* 或者使用更现代的替代方案 */
  overflow-wrap: break-word; /* 现代标准写法，等同于旧版的 `word-wrap: break-word;` */
  /* 确保正常处理空白字符换行 */
  white-space: normal;
}
.label {
		font-size: 30rpx;
		color: #999999;
		margin-right: 30rpx;
		width: 150rpx;
	}

	.value {
		font-size: 30rpx;
		color: #333333;
	}

</style>
